<template>
  <h2>这是一个HelloWorld子组件</h2>
  <p>V3中的数字是:{{ num }}</p>
  <p>V3中的消息是:{{ msg }}</p>
  <p>V2中的数值是:{{ num }}</p>
  <p>V2中的字符串是:{{ msg }}</p>
  <button @click="changeNum">更改V3数字</button>
  <!-- <button @click="msg+='@'">更改V3字符串</button> -->
  <button @click="changeMsg">更改V3字符串</button>
  <button @click="count++">更改V2数字</button>
</template>

<script>
export default {
  name: "HelloWorld",

  data() {
    return {
      num: 22,
      msg: "Hello V2",
    }
  },
  methods: {
    // updateNum() {
    changeNum() {
      console.log("访问到了V3中的数据...", this.num)
      this.num++
    },
  },
  // 1. setup执行时机非常早 早于beforeCreate 不能直接使用this this此时是undefined
  // 2. 也会早于data watch computed等等
  // 3. setup函数中不能直接使用this，但是在setup中定义的普通函数中是可以使用this的
  // 4. 要想让V3中的数据变成响应式 可以使用ref()来处理一下，然后在插值表达式中直接使用
  // 5. 在setup中定义的变量或是函数，一定要通过对象的方式返回
  // 6. 如果在data中和setup中定义的数据重复的话，以setup中定义的数据为主
  // 7. V2中的methods  computed等可以直接使用V3中定义的数据
  // 8. setup中不能访问V2中的data methods computed 因为data methods等会覆盖V2的
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
